<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="fruitTitle">
          <img src="https://iconfont.alicdn.com/t/2df4f2cd-fc68-42a3-b7f6-23bc42230307.png">
          <span>水果超市后台管理系统</span>
        </div>
         <el-button type="primary" plain @click="logout" >退出系统</el-button>
      </el-header>
      <el-container >
        <!-- 侧边栏 -->
        <el-aside class="sectionAside" :width="isCollapse?'60px':'200px'">
          <div  class="toggleBtn" @click="toggleCollapse">
              <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
          </div>
              <el-menu
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              :default-active="path"
              :collapse="isCollapse"
              :unique-opened="true"
              :collapse-transition="false"
              :router="true"
              >
                <el-submenu :index="item.id+''"  v-for="item in menudata" :key="item.id">
                  <template slot="title">
                    <i :class="iconobj[item.id]"></i>
                    <span>{{item.name}}</span>
                  </template>
                     <el-menu-item  :index="list.path" v-for="list in item.child" :key="list.id" @click="saveMenuStatus(list.path)">
                        <template slot="title">
                          <i class="el-icon-menu"></i>
                          <span>{{list.name}}</span>
                        </template>
                      </el-menu-item>
                </el-submenu>
              </el-menu>
        </el-aside>
        <!-- 主页 -->
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return {
        menudata:[],
        iconobj:{
          '1':'el-icon-s-custom',
          '2':'el-icon-s-tools',
          '3':'el-icon-s-goods',
          '4':'el-icon-edit-outline',
          '5':'el-icon-s-data'
        },
        isCollapse:false,
        path:'/users'
    }
  },
  methods:{
      logout(){
        window.sessionStorage.clear();
        this.$router.push({path:'/login'})
      },
      async handleOpen(key, keyPath) {
        let res=await this.$http.get('/api/menu');
        if(!res.status=='ok') return
        this.menudata=(res.data).data;
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      toggleCollapse(){
        this.isCollapse=!this.isCollapse;
      },
      saveMenuStatus(val){
        window.sessionStorage.setItem('activePath',val);
      }
  },
  created(){
    this.handleOpen();
    const activePath=window.sessionStorage.getItem('activePath');
    this.path=activePath;
  },
  mounted(){
    const aside=document.getElementsByClassName('sectionAside');
    aside[0].style.height=window.innerHeight-95+'px';
  }
}
</script>

<style lang="stylus" scoped>
  .el-header
      width 100%
      height 95px !important
      background #3d4f9e
      display flex
      justify-content space-between
      align-items center
      .fruitTitle
          width 200px
          height 100px
          margin-left -20px
          display flex
          flex-direction column
          align-items center
          img  
            display block
            width 70px
            height 70px
            border-radius 50%
          span 
            color #eee
      el-button
        padding 0px
        align-items center
  .el-aside 
    background #3d4f9e
    color #333
    height auto
    overflow hidden
    .el-submenu i
      margin-right 20px 
    span 
      margin-right 50px
  .el-main 
    background-color #E9EEF3 
    height auto
    color #333
    text-align center
    text-align center
  .toggleBtn
    width 200px
    height 56px
    line-height 56px
    text-align left 
    font-size 26px
    background #ffffff
    color #8a8a8a
    border-bottom 1px solid #d5d5d7
    i 
      padding-left 24px
</style>